<template>
  <view class="">
       <u-sticky>
      <view class=""  style='background-image: linear-gradient(to right, #6CBEFF, #1F8CE5);'>
    <view class="justify-center section_1">
      <image
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558030319391953198.png"
        class="image"
        @click="onClickImage"
      />
      <text class="text">我的订单</text>
    </view>
    <view class="section_2">
      <view class="flex-row section_222">
        <text class="text_2 " :class="pageInfo.orderStatus===0?'text_222':''" @click="navz(0)">待付款</text>
        <text class="text_2" :class="pageInfo.orderStatus==1?'text_222':''" @click="navz(1)">待咨询</text>
        <text class="text_2" :class="pageInfo.orderStatus==2?'text_222':''" @click="navz(2)">待评价</text>
        <text class="text_2" :class="pageInfo.orderStatus==3?'text_222':''" @click="navz(3)">已完成</text>
        <text class="text_2" :class="pageInfo.orderStatus===' '?'text_222':''" @click="navz(4)">全部订单</text>
      </view>
     <!-- <view class="flex-row group_20" style="border-left: 1rpx solid #ccc;" @click="show=true">
           <view class="" style="font-size: 24rpx;margin-left: 20rpx;color: #FFF;">
               {{all}}
           </view>
          <u-icon name="arrow-down-fill" color='#fff' size='8'></u-icon>
      </view> -->
    </view>
    </view>
    </u-sticky>
    <view class="flex-col line-tabs">

      <view class="flex-col list">
          <view class="" style="text-align: center;" v-if="list_YhKWZRNv.length==0">
              <image src="../../static/dingdan.png" mode="scaleToFill" style="margin-top: 100rpx;width: 150rpx;height: 180rpx;"></image>
              <view class="" style="color: #999;font-size: 28rpx;margin-top: 20rpx;">
                  暂无订单
              </view>
          </view>
        <view class="flex-col list-item"  v-for="(item, i) in list_YhKWZRNv" :key="i">
          <view class="justify-between group_1">
            <text class="text_7">下单时间：{{item.createTime}}</text>
            <text v-show="item.orderStatus==0" class="text_9">待付款</text>
            <text v-show="item.orderStatus==1&&!item.test" class="text_9">待咨询</text>
            <text v-show="item.orderStatus==1&&item.test" class="text_9">待测评</text>
            <text v-show="item.orderStatus==2" class="text_9">待评价</text>
            <text v-show="item.orderStatus==3" class="text_9">已完成</text>

          </view>
        <view class="flex-row group_2"  @click="details(item)" v-if="item.serviceTypeName != null">
            <view class="flex-col items-center group_3">
              <!-- <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114145792943216.png"
                class="image_2"
              /> -->
              <image
                :src="item.wxAvatar!=null?item.wxAvatar:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114145792943216.png'"
                class="image_2"
              />
              <view class="flex-col items-center text-wrapper"><text class="text_11">在线</text></view>
              <!-- <view class="flex-col items-center text-wrapper2"  v-show="!item.online"><text class="text_11">离线</text></view> -->
            </view>
            <view class="flex-col group_4">
              <view class="flex-row">
                <text class="text_13">{{item.adviserName}}</text>
                <view class="flex-col text-wrapper_1"><text class="text_15">{{item.adviserLevelInfo}}</text></view>
              </view>
             <scroll-view scroll-x="true" style="width: 400rpx;margin-top: 0.47rem;">
                 <view class="group_6s">
                   {{ item.goodWaysString }}
                 </view>
                 <!-- <view class="flex-row group_6">
                    <view class="" v-for="(item,index) in item.label">
                        {{item}}
                    </view>
                  </view> -->
              </scroll-view>
             

            </view>
        </view>
        <view class="" v-if="!item.test">
            <view class="justify-between section_6" v-if="item.serviceTypeName=='立即咨询'" >
                <view class="flex-row group_7">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114159285700258.png"
                    class="image_4"
                  />
                  <text class="text_21">电话咨询</text>
                </view>
                <view class="flex-col items-center text-wrapper_2"  v-if="item.orderStatus==1"><text class="text_23" @click="phone(item.adviserId)">点击呼叫</text></view>
                 <view class="flex-col items-center text-wrapper_23" v-else><text class="text_23">点击呼叫</text></view>
            </view>
            <view class="justify-between section_6"    v-if="item.serviceTypeName=='文字咨询'">
                <view class="flex-row group_7">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558217497991576448.png"
                    class="image_4"
                  />
                  <text class="text_21">文字咨询</text>
                </view>
                <view class="flex-col items-center text-wrapper_2"  v-if="item.orderStatus==1"><text class="text_23" @click="click26(item)">点击进入咨询室</text></view>
                 <view class="flex-col items-center text-wrapper_23" v-else><text class="text_23">点击进入咨询室</text></view>
            </view>
            <view class="justify-between section_6"    v-if="item.serviceTypeName=='包月咨询'">
                <view class="flex-row group_7">
                  <image
                    src="https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558155417132973951.png"
                    class="image_4"
                  />
                  <text class="text_21">包月咨询</text>
                </view>
                <view class="flex-col items-center text-wrapper_2"  v-if="item.orderStatus==1"><text class="text_23" @click="phones()">点击预约电话咨询</text></view>
                 <view class="flex-col items-center text-wrapper_23" v-else><text class="text_23">点击预约电话咨询</text></view>
                <view class="flex-col items-center text-wrapper_2"  v-if="item.orderStatus==1"><text class="text_23" @click="click26(item)">点击进入咨询室</text></view>
                 <view class="flex-col items-center text-wrapper_23" v-else><text class="text_23">点击进入咨询室</text></view>
            </view>
        </view>
        <view class="texts" v-if="item.serviceTypeName == null"  @click="details(item)">
            <view class="left">
                测评
            </view>
            <view class="right">
                {{item.title}}
            </view>
        </view>
          <view class="divider"></view>
          <view class="justify-between group_8">
            <view class="flex-row group_9">
              <text class="text_25">应付款：</text>
              <text class="text_27"  :class="item.status!=0?'text_299':''">￥</text>
              <text class="text_29" :class="item.status!=0?'text_299':''">{{item.actualPrice}}</text>
            </view>
            <view class="flex-row group_10 view_13" >
              <view class="flex-col items-center text-wrapper_3" v-show="item.orderStatus==0"><text class="text_31" @click.stop="click(0,item.orderNo)">取消订单</text></view>
              <view class="flex-col items-center text-wrapper_4"  v-show="item.orderStatus==0"><text class="text_32" @click.stop="click(1,item.orderNo,item.serviceTypeName,item.topicId)">付款</text></view>


   <!--           <view class="flex-col items-center text-wrapper_3" v-show="item.orderStatus==1&&!item.test"><text class="text_31" @click.stop="click(2,item.orderNo,item.consultingWay)">去咨询</text></view> -->
              <view class="flex-col items-center text-wrapper_3" v-show="item.orderStatus==1&&item.test"><text class="text_31" @click.stop="click(5,item.orderNo)">去测评</text></view>


              <view class="flex-col items-center text-wrapper_31" v-show="item.orderStatus==2"><text class="text_311" @click.stop="click(3,item.orderNo,item.adviserId)">去评价</text></view>
              <view class="flex-col items-center text-wrapper_3" v-show="item.orderStatus==3"><text class="text_31" @click.stop="click(4,item.orderNo,item.adviserId)">已完成</text></view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <!-- <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker> -->
    <!-- <u-popup :show="showpop"  round="10">
       <fuwupingjia :fuwupingjiaShowVisible.sync="showpop"  :expertsId="expertsId" @evaluate="test"></fuwupingjia>
     </u-popup> -->
  </view>
</template>

<script>
import {
  getmyorder,
  getModifyTheState,
  getocancel,
  getVirtualPhone,
  getunbundling,
  userOrderList,
  cancellationOrder
} from '../../api/index.js'
	import {
		miniAppPay
	} from '../../api/pay.js'
      // import fuwupingjia from '../huaban_1_kaobei_55/huaban_1_kaobei_55'
  export default {
    components: {
        // fuwupingjia
    },
    data() {
      return {
        pageInfo: {
          pageNum: 0,
          pageSize: 10,
          orderStatus: ' '
        },
          expertsId:'',
          orderNo:'',
          showpop:false,
          all:'全部订单',
          show:false,
          columns: [
                ['全部订单', '代付款', '待服务','待确认','已完成','待评价']
          ],
          inds:5,
          indsdata:0,
          value5:0,
          range5: [{
                  value: 0,
                  text: "全部订单"
              },
              {
                  value: 1,
                  text: "待付款"
              },
              {
                  value: 2,
                  text: "待服务"
              },
              {
                  value: 3,
                  text: "待确认"
              },
              {
                  value: 4,
                  text: "待评论"
              },
              {
                  value: 5,
                  text: "已完成"
              },
              {
                  value: 6,
                  text: "已取消"
              },
          ],
        list_YhKWZRNv: [
            // {
            //     test:false, //是否为测评订单
            //     createTime:'2022-05-19 15：47：01 ',
            //     orderStatus:1, //订单状态 0待支付 1待服务 2待评价 4已完成
            //     avatars:'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/62ac1d455a7e3f03100b6468/62b188edd029820011534ee0/16558114145792943216.png',
            //     adviserName:'贾晓兰',
            //     adviserLevelInfo:'高级餐饮咨询师',
            //    label:[
            //        '恋爱婚姻',
            //        '家庭关系',
            //        '个人成长'
            //    ],
            //     online:true, //在线状态
            //     payPrice:99.9,
            //     consultingWay:"文字咨询"   //0 电话咨询 1文字咨询
            // }
        ],
        time:[]
      };
    },
    onLoad(option) {
      console.log('option', option)
      let data = JSON.parse(decodeURIComponent(option.data))
      console.log('data', data)
      this.pageInfo.orderStatus = data.orderStatus
      if(this.pageInfo.orderStatus == 4) {
        this.pageInfo.orderStatus = ' '
      }
      this.fromlist()
    },
    onReachBottom() {
      this.pageInfo.pageNum += 1
      this.fromlist()
    },
    methods: {
        phones(){
            uni.navigateTo({
                url:'/pages/userSide/particulars'
            })
        },
        test(e){
          console.log(e);
            let data = {
              orderNo: this.orderNo,
              expertsId:this.expertsId,
              status: 5
            }
            getModifyTheState(data).then(res => {
               uni.showToast({
                 title: '评价完成',
                 icon: 'none'
               })
              this.fromlist()
            })
        },
       phone(expertsId){
           uni.navigateTo({
               url:'/pages/myorder/phone?expertsId='+expertsId
           })
       },
        fromlist(){
          userOrderList(this.pageInfo).then(res => {
            this.list_YhKWZRNv = this.list_YhKWZRNv.concat(res.rows)
          })
        },
        confirm(e) {

        			},
        cancel(){
            this.show = false
        },
        details(a){
			console.log(a)
			if(a.serviceTypeName != null){
				 uni.navigateTo({ url: '/pages/myorder/orderDetails?id='+a.orderNo });
			}
        },
        click(a,orderNo, expertsId,consultingWay){
            // 0 取消订单 1付款 2服务 3评价 4完成
           console.log(a);
           if(a==0){
               let data={
                  orderNo:orderNo
               }
               cancellationOrder(data).then(res=>{
                   console.log("取消订单",res);
				   uni.showToast({
				   	title: '取消成功'
				   })
                   uni.navigateBack({
                       delta:1
                   })
               })
           }
           if(a==5){
               uni.navigateTo({
                   url:'/pages/userSide/quiz'
               })
           }
           if(a==1){
               uni.showLoading({
               	title: '订单支付中'
               });
               this.getOrderPay(orderNo, '支付成功',expertsId,consultingWay);
           }
           console.log('expertsId', expertsId)
           if (a == 3 ) {
               this.expertsId=expertsId
               this.orderNo=orderNo
               this.showpop=true
           }
           if(a==2){
               if(consultingWay=='电话咨询'){
                   uni.navigateTo({
                       url:'/pages/myorder/phone?expertsId='+expertsId
                   })
               }else{
                uni.navigateTo({
                    url:'/pages/myorder/imageText?expertsId='+expertsId
                })
            }
           }
        },
        getOrderPay: function(orderNo, message,expertsId,consultingWay) {
        	console.log(orderNo)
			let data = {
				orderNo:orderNo,
				orderCategory:expertsId!=null?1:0, //订单类型咨询订单
				openId:this.$store.state.userInfo.wxInfo.openId //唯一id
			}
        	miniAppPay(data).then(ress => {
        		uni.requestPayment({
        			timeStamp: ress.data.timeStamp,
        			nonceStr: ress.data.nonceStr,
        			package: ress.data.package,
        			signType: ress.data.signType,
        			paySign: ress.data.sign,
        			success: function(res) {
        				uni.showToast({
        					title: '正在处理中'
        				})
						//跳转订单详情 关闭所有页面跳转
						setTimeout(() => {
							if(expertsId!=null){
								uni.redirectTo({
									url: '/pages/myorder/orderDetails?id=' + ress.data.orderNo
								});
							}else{
								uni.redirectTo({
									url: '/pages/userSide/quiz?id=' + consultingWay
								})
							}
						 
						}, 1500)
        			},
        			// 参数有问题则抛出错误
        			fail: function(err) {
        				//跳转订单详情 关闭所有页面跳转
        				uni.redirectTo({
        					url: '/pages/myorder/orderDetails?id=' + ress.data.orderNo
        				});
        				uni.showToast({
        					title: '支付失败'
        				})
        			},
        		})
        	})
        },
        navz(index){
          this.list_YhKWZRNv = []
            this.pageInfo.pageNum = 0
            this.pageInfo.orderStatus = index
            if(this.pageInfo.orderStatus == 4){
              this.pageInfo.orderStatus = ' '
            }
            this.fromlist()
        },
        change5(e) {
            console.log("e:", e);
        },
      onClickImage() {
        uni.navigateBack({
            delta:1
        })
      },
      onClickView_46() {
        uni.navigateTo({ url: '/pages/huaban_1_kaobei_55/huaban_1_kaobei_55' });
      },
      click26(orderNo){
          console.log("进入咨询室");
		  console.log(orderNo)

          uni.navigateTo({
               url:'/pages/myorder/imageText?id=' + orderNo.adviserId +"&orderid=" + orderNo.id
          })
      }
    },
  };
</script>
<style>
    page{
        background-color: #F5F5F5;
    }
</style>
<style scoped lang="scss">
    .pdfbox{
        padding: 30rpx 30rpx 10rpx;
        .tit{
            display: flex;
            align-items: center;
            font-weight: bold;
            text{
                background-color:#6D79FE ;
                border-radius: 10rpx;
                color: #fff;
                width: 66rpx;
                line-height: 36rpx;
                text-align: center;
                display: inline-block;
                font-size: 22rpx;
                margin-right: 25rpx;
            }
            .text2{
                 background-color:#FC56CA ;
            }
            .title{
                font-size: 28rpx;
            }
        }

        .con{
            background-color: #F3F0FF;
            border-radius: 5rpx;
            padding: 15rpx;
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            image{
                width: 50rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }
            .wenj{
                color: #333333;
                font-size: 24rpx;

            }
        }
    }
    ::v-deep .uni-stat__select {
        width:auto !important;
        color: #fff !important;
        border: 0 !important;
        font-size: 14px !important;
    }

    ::v-deep .uni-select {
        color: #fff !important;
        border: 0 !important;
        padding: 0 !important;
        height: auto !important;
        font-size: 0.75rem !important;
    }

    ::v-deep .uni-select__input-text {
        width: 130rpx  !important;
        padding: 0 5rpx !important;
         text-align: center !important;
        color: #fff !important;
        font-family: SourceHanSansCN !important;
        margin-right:5rpx !important;
    }
    ::v-deep .uni-select__selector-item {
        text-align: center !important;
         padding:0 10rpx !important;
        color: #666 !important;
        font-size: 0.75rem !important;
        line-height: 1.2rem !important;
        font-family: SourceHanSansCN !important;
        margin: 0 auto !important;
        width: auto !important;
    }

    ::v-deep .uni-input-placeholder {
        color: #fff !important;

    }
    ::v-deep .uni-icons{
         display: none  !important;
     }
  .list-item {
    background-color: #ffffff;
    border-radius: 0.47rem;
    margin-bottom: 20rpx;
  }
  .group_1 {
    padding: 1rem 0.94rem 0.94rem;
    border-bottom: solid 0.031rem #e5e5e5;
  }
  .group_2 {
    padding: 0.97rem 1.56rem 0.94rem;
  }
  .section_6 {
    margin-left: 1rem;
    margin-right: 1.03rem;
    padding: 0.59rem 0.72rem 0.59rem 0.94rem;
    background-color:#D2E8F9;
    border-radius: 0.47rem;
  }
  .divider {
    margin: 0.94rem 1.03rem 0 0.91rem;
    background-color: #e5e5e5;
    height: 0.031rem;
  }
  .group_8 {
    padding: 0.78rem 0.91rem 0.91rem 0.94rem;
  }
  .text_7 {
    color: #999999;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
    letter-spacing: -0.018rem;
  }
  .text_9 {
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
    letter-spacing: -0.019rem;
  }
  .group_3 {
    padding-bottom: 0.34rem;
    flex-shrink: 0;
    width: 3.13rem;
    position: relative;
  }
  .group_4 {
    margin-left: 0.5rem;
    flex: 1 1 auto;
    align-self: center;
  }
  .group_7 {
    margin: 0.25rem 0;
  }
  .text-wrapper_2 {
    padding: 0.38rem 20rpx 0.41rem;
    background-color: #fea14a;
    background-image: linear-gradient(0deg, #fea14a 0%, #ffb36c 100%, #ffb36c 100%);
    border-radius: 0.72rem;
    height: 1.44rem;
  }
  .text-wrapper_23{
    padding: 0.38rem 20rpx  0.41rem;
    background-color: #ccc;
    background-image: linear-gradient(0deg, #ccc 0%, #ccc 100%, #ccc 100%);
    border-radius: 0.72rem;
    height: 1.44rem;
  }
  .group_9 {
    align-self: center;
  }
  .group_10 {
    padding: 0.47rem 0;
    border-radius: 0.88rem;
    width: 4.88rem;
    height: 1.75rem;
    border: solid 0.031rem #7782fe;
  }
  .image_2 {
    width: 3.13rem;
    height: 3.13rem;
  }
  .text-wrapper {
    padding: 0.19rem 0;
    background-color: #2691E6;
    border-radius: 0.47rem;
    width: 2.13rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fffffe;
  }
  .text-wrapper2 {
    padding: 0.19rem 0;
    background-color: #ccc;
    background-image: linear-gradient(-45deg, #ccc 0%, #ccc 100%);
    border-radius: 0.47rem;
    width: 2.13rem;
    position: absolute;
    top: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #666
  }
  .group_6 {
   display:inline-flex;
   view{
       font-size: 20rpx;
       color: #666;
       background-color: #E0ECF8;
       padding: 5rpx 10rpx;
       margin-right: 15rpx;
   }

  }
  .group_6s {
       font-size: 20rpx;
       color: #666;
       background-color: #E0ECF8;
       padding: 5rpx 10rpx;
       margin-right: 15rpx;
  }
  .image_4 {
    flex-shrink: 0;
    filter: drop-shadow(0px 0.094rem 0.56rem #df891e36);
    width: 0.94rem;
    height: 0.94rem;
  }
  .text_21 {
    margin: 0.13rem 0 0.094rem 0.34rem;
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.72rem;
  }
  .text_23 {
    color: #ffffff;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_25 {
    color: #333333;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.78rem;
    letter-spacing: -0.021rem;
  }
  .text_27 {
    margin-top: 0.16rem;
    color: #e65943;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.59rem;
  }
  .text_29 {
    margin-bottom: 0.094rem;
    color: #e65943;
    font-size: 1rem;
    font-family: DINPro;
    font-weight: 700;
    line-height: 0.72rem;
  }
  .text_299{
    color: #666;
  }
  .text-wrapper_3 {
    padding: 0.5rem 0;
    border-radius: 0.88rem;
    width: 4.88rem;
    height: 1.75rem;
    border: solid 0.031rem #999999;
  }
  .text-wrapper_31 {
    padding: 0.5rem 0;
    border-radius: 0.88rem;
    width: 4.88rem;
    height: 1.75rem;
    border: solid 0.031rem #6D79FE;
  }
  .text_11 {
    color: #fffffe;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.59rem;
  }
  .text_13 {
    margin-bottom: 0.094rem;
    color: #333333;
    font-size: 1rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 0.94rem;
  }
  .text-wrapper_1 {
    margin-left: 0.38rem;
    padding: 0.13rem 0 0.22rem;
    background-color: #e6594300;
    border-radius: 0.5rem;
    height: 1.03rem;
    border: solid 0.031rem #e65943;
  }
  .text_17 {
    color: #666666;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_19 {
    color: #666666;
    font-size: 0.69rem;
    font-family: SourceHanSansCN;
    line-height: 0.66rem;
  }
  .text_15 {
    margin: 0 0.34rem;
    color: #e65943;
    font-size: 0.63rem;
    font-family: SourceHanSansCN;
    line-height: 0.63rem;
  }
  .section_1 {
    padding: 3rem 0.91rem 1rem;

    // background-image: linear-gradient(-45deg, #6d79fe 0%, #96a3ff 100%);
    position: relative;
  }
  .line-tabs {
    padding-bottom: 1.16rem;
    position: relative;
  }
  .image {
    position: absolute;
    left: 0.91rem;
    top: 2.19rem;
    width: 0.63rem;
    height: 1.06rem;
  }
  .text {
    color: #ffffff;
    font-size: 1.06rem;
    font-family: SourceHanSansCN;
    font-weight: 500;
    line-height: 1rem;
  }
  .section_2 {

  }
  .section_222{
      align-items: center;
      display: flex;
      justify-content: space-around;
      align-items: center;width: 100vw;
  }
  .list {
    margin: 0.72rem 0.94rem 0;
    background-color: #f5f5f5;
  }
  .text_1 {
    color: #ffffff;
    font-size: 0.81rem;
    font-family: SourceHanSansCN;
    font-weight: 700;
    line-height: 0.75rem;

  }
  .text_2 {
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.69rem;
  }
  .text_222 {
    padding: 28rpx 0 20rpx;
    border-bottom: 8rpx solid #ccc;
  }
  .text_3 {
    margin-left: 1.28rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .text_4 {
    margin-left: 1.31rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .text_5 {
    margin-left: 1.25rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .section_3 {
    margin-left: 0.69rem;
    flex-shrink: 0;
    background-color: #f7f7f74a;
    width: 0.031rem;
    height: 0.81rem;
  }
  .text_6 {
    margin-left: 0.72rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .image_1 {
    margin: 0.31rem 0 0.25rem 0.25rem;
    flex-shrink: 0;
    width: 0.31rem;
    height: 0.25rem;
  }
  .view_13 {
    padding: initial;
    border-radius: initial;
    width: initial;
    height: initial;
    border: initial;
  }
  .text-wrapper_4 {
    margin-left: 0.59rem;
    padding: 0.44rem 0 0.53rem;
    border-radius: 0.88rem;
    width: 3.53rem;
    height: 1.75rem;
    border: solid 0.031rem #e65943;
  }
  .text_31 {
    color: #333333;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.69rem;
  }
  .text_311 {
    color: #6D79FE;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.69rem;
  }
  .text_32 {
    color: #e65943;
    font-size: 0.75rem;
    font-family: SourceHanSansCN;
    line-height: 0.72rem;
  }
  .group_20{
      align-items: center;
  }

  .image_34 {
      flex-shrink: 0;
      width: 0.31rem;
      height: 0.25rem;
  }
  .texts{
      width: 85vw;
      margin: 30rpx auto;
      display: flex;
      .left{
          width:66rpx;
          line-height: 36rpx;
          background-image: linear-gradient(to right,#6CBEFF,#6CBEFF);
          color: #fff;
          font-size: 22rpx;
          font-weight: bold;
          text-align: center;
          margin-right: 25rpx;
      }
      .right{
          font-size: 28rpx;
          color:#363636;
          width: 60vw;
          font-weight: bold;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
      }
  }
</style>
